"use client"

import { useState, useRef, useEffect } from "react"

// Emoji data
const emojiCategories = [
  {
    name: "Frequently Used",
    emojis: ["😊", "😂", "👍", "❤️", "😍", "🎉", "👋", "🙏", "🤔", "😎", "😢", "🔥", "✨", "💯", "🤣"],
  },
  {
    name: "Smileys",
    emojis: [
      "😀",
      "😃",
      "😄",
      "😁",
      "😆",
      "😅",
      "😂",
      "🤣",
      "😊",
      "😇",
      "🙂",
      "🙃",
      "😉",
      "😌",
      "😍",
      "🥰",
      "😘",
      "😗",
      "😙",
      "😚",
      "😋",
      "😛",
      "😝",
      "😜",
      "🤪",
      "🤨",
      "🧐",
      "🤓",
      "😎",
      "🤩",
      "🥳",
    ],
  },
  {
    name: "Gestures",
    emojis: [
      "👍",
      "👎",
      "👌",
      "✌️",
      "🤞",
      "🤟",
      "🤘",
      "🤙",
      "👈",
      "👉",
      "👆",
      "👇",
      "☝️",
      "👋",
      "🤚",
      "🖐️",
      "✋",
      "🖖",
      "👏",
      "🙌",
      "👐",
      "🤲",
      "🤝",
      "🙏",
    ],
  },
  {
    name: "Symbols",
    emojis: [
      "❤️",
      "🧡",
      "💛",
      "💚",
      "💙",
      "💜",
      "🖤",
      "💔",
      "❣️",
      "💕",
      "💞",
      "💓",
      "💗",
      "💖",
      "💘",
      "💝",
      "💟",
      "☮️",
      "✝️",
      "☪️",
      "🕉️",
      "☸️",
      "✡️",
      "🔯",
      "🕎",
      "☯️",
      "☦️",
      "🛐",
      "⛎",
      "♈",
      "♉",
      "♊",
      "♋",
      "♌",
      "♍",
      "♎",
      "♏",
      "♐",
      "♑",
      "♒",
      "♓",
      "🆔",
    ],
  },
]

type EmojiPickerProps = {
  onEmojiSelect: (emoji: string) => void
  onClose: () => void
}

export default function EmojiPicker({ onEmojiSelect, onClose }: EmojiPickerProps) {
  const [activeCategory, setActiveCategory] = useState(0)
  const pickerRef = useRef<HTMLDivElement>(null)

  // Close emoji picker when clicking outside
  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (pickerRef.current && !pickerRef.current.contains(event.target as Node)) {
        onClose()
      }
    }

    document.addEventListener("mousedown", handleClickOutside)
    return () => {
      document.removeEventListener("mousedown", handleClickOutside)
    }
  }, [onClose])

  return (
    <div
      ref={pickerRef}
      className="absolute bottom-12 left-0 win95-border bg-[#c0c0c0] p-1 z-50 w-64"
      style={{ maxHeight: "300px" }}
    >
      {/* Title bar */}
      <div className="bg-[#000080] text-white px-1 py-1 flex items-center justify-between mb-1">
        <span className="text-xs font-bold">Emoji Selector</span>
        <button
          onClick={onClose}
          className="win95-button w-4 h-4 flex items-center justify-center text-black bg-[#c0c0c0] text-xs"
        >
          X
        </button>
      </div>

      {/* Category tabs */}
      <div className="flex border-b border-[#808080] mb-1">
        {emojiCategories.map((category, index) => (
          <button
            key={index}
            className={`text-xs px-2 py-1 ${activeCategory === index ? "bg-[#000080] text-white" : ""}`}
            onClick={() => setActiveCategory(index)}
          >
            {category.name}
          </button>
        ))}
      </div>

      {/* Emoji grid */}
      <div className="win95-inset bg-white p-1 overflow-y-auto" style={{ maxHeight: "200px" }}>
        <div className="grid grid-cols-6 gap-1">
          {emojiCategories[activeCategory].emojis.map((emoji, index) => (
            <button
              key={index}
              className="win95-button bg-[#c0c0c0] w-8 h-8 flex items-center justify-center text-lg hover:bg-[#d0d0d0]"
              onClick={() => onEmojiSelect(emoji)}
            >
              {emoji}
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}
